<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

    <title>INSPINIA | Grid Opons</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <style type="text/css">
        html,body{-webkit-text-size-adjust:none;}
        .acc-head {
            cursor: pointer;
            background-color: #18a689;
            border-bottom: 1px solid #167c67;
        }

        .acc-head span {
            color: honeydew;
            font-size:15px;
            padding-right: 0px;
            padding-left: 0px;
        }
        .acc-head.active {
            background-color: #167c67;
        }
        .acc-head:hover {
            background-color: #167c67;
        }
        @media screen and (max-width: 600px) {
            .acc-head span  {
                font-size: 7px;
            }
        }
    </style>
</head>

<body>

    <div id="wrapper">

        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav metismenu" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element"> <span>
                            <img alt="image" src="./img/logo_blue.png" />
                             </span>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <li><a href="profile.html">Profile</a></li>
                                <li><a href="contacts.html">Contacts</a></li>
                                <li><a href="mailbox.html">Mailbox</a></li>
                                <li class="divider"></li>
                                <li><a href="login.html">Logout</a></li>
                            </ul>
                        </div>
                        <div class="logo-element">
                            CMCC
                        </div>
                    </li>
                    <li>
                        <a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">参数导入</span></a>
                    </li>
                    <li>
                        <a href="layouts.html"><i class="fa fa-diamond"></i> <span class="nav-label">待处理</span></a>
                    </li>
                    <li>
                        <a href="metrics.html"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">工单派发</span></a>
                    </li>
                    <li>
                        <a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">指标统计</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-edit"></i> <span class="nav-label">查询</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="form_basic.html">工单查询</a></li>
                            <li><a href="form_advanced.html">问题点查询</a></li>
                            <li><a href="form_wizard.html">专项项目列查询</a></li>
                            <li><a href="form_file_upload.html">问题集查询</a></li>
                            <li><a href="form_editors.html">暂挂库查询</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="basic_gallery.html"><i class="fa fa-pie-chart"></i> <span class="nav-label">已处理</span>  </a>
                    </li>
                    <li>
                        <a href="graph_peity.html"><i class="fa fa-flask"></i> <span class="nav-label">工单统计</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-desktop"></i> <span class="nav-label">帮助</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="contacts.html">工单规则</a></li>
                            <li><a href="profile.html">流程图</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="invoice.html"><i class="fa fa-files-o"></i> <span class="nav-label">使用统计</span></a>
                    </li>
                    <li>
                        <a href="typography.html"><i class="fa fa-flask"></i> <span class="nav-label">专项派发</span></a>
                    </li>
                    <li class="active">
                        <a href="grid_options.html"><i class="fa fa-laptop"></i> <span class="nav-label">一键处理</span></a>
                    </li>
                </ul>
            </div>
        </nav>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
        <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
            <form role="search" class="navbar-form-custom" action="search_results.html">
                <div class="form-group">
                    <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                </div>
            </form>
        </div>
            <ul class="nav navbar-top-links navbar-right">
                <li>
                    <span class="m-r-sm text-muted welcome-message">网优中心-刘华明</span>
                </li>
                <li>
                    <a href="login.html">
                        <i class="fa fa-sign-out"></i> Log out
                    </a>
                </li>
            </ul>

        </nav>
        </div>
        <div class="wrapper wrapper-content">
            <div id="app_content" class="row">
                <!--<div class="col-xs-12">-->
                    <!--<div class="acc-head active"><span class="col-xs-3">17-03-29 14:31:40</span><span class="col-xs-3">遂宁网络部优化中心:彭万均</span><span class="col-xs-3">环节：方案制作</span><span class="col-xs-3">操作：派发</span></div>-->
                    <!--<div style="padding:15px;border:1px solid #18a689;">-->
                        <!--<h1>年度累计阿斯兰迪斯阿萨德阿萨德阿萨德阿斯的</h1>-->
                        <!--<h2>啊撒啊啊啊啊啊啊啊啊啊啊啊啊啊</h2>-->
                        <!--<p>你好</p>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="col-xs-12">-->
                    <!--<div class="acc-head active"></div>-->
                    <!--<div style="padding:15px;border:1px solid #18a689;">-->
                        <!--<h1>年度累计阿斯兰迪斯阿萨德阿萨德阿萨德阿斯的</h1>-->
                        <!--<h2>啊撒啊啊啊啊啊啊啊啊啊啊啊啊啊</h2>-->
                        <!--<p>你好</p>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="col-xs-12">-->
                    <!--<div class="acc-head active"></div>-->
                    <!--<div style="padding:15px;border:1px solid #18a689;">-->
                        <!--<h1>年度累计阿斯兰迪斯阿萨德阿萨德阿萨德阿斯的</h1>-->
                        <!--<h2>啊撒啊啊啊啊啊啊啊啊啊啊啊啊啊</h2>-->
                        <!--<p>你好</p>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="col-xs-12">-->
                    <!--<div class="acc-head active"></div>-->
                    <!--<div style="padding:15px;border:1px solid #18a689;">-->
                        <!--<h1>年度累计阿斯兰迪斯阿萨德阿萨德阿萨德阿斯的</h1>-->
                        <!--<h2>啊撒啊啊啊啊啊啊啊啊啊啊啊啊啊</h2>-->
                        <!--<p>你好</p>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>
        <div class="footer">
            <div class="pull-right">
                10GB of <strong>250GB</strong> Free.
            </div>
            <div>
                <strong>Copyright</strong> Example Company &copy; 2014-2015
            </div>
        </div>

        </div>
        </div>



    <!-- Mainly scripts -->
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- Peity -->
    <script src="js/plugins/peity/jquery.peity.min.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="js/inspinia.js"></script>
    <script src="js/plugins/pace/pace.min.js"></script>

    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>

    <!-- Peity -->
    <script src="js/demo/peity-demo.js"></script>

    <script>
        $(document).ready(function(){
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            <!-- 拼接 -->
            var div11 = $("<div class='col-xs-12'>");
            var div21 = $("<div class='col-xs-12'>");
            var div12 = $("<div class='col-xs-12 acc-head active'><span class='col-xs-3'>17-03-29 14:31:40</span><span class='col-xs-3'>遂宁网络部优化中心:彭万均</span><span class='col-xs-3'>环节：方案制作</span><span class='col-xs-3'>操作：派发</span></div>");
            var div22 = $("<div class='col-xs-12 acc-head active'><span class='col-xs-3'>17-03-29 14:31:40</span><span class='col-xs-3'>遂宁网络部优化中心:彭万均</span><span class='col-xs-3'>环节：方案制作</span><span class='col-xs-3'>操作：派发</span></div>");
            var div13 = $("<div style='padding:15px;border:1px solid #18a689;'><h1>年度累计阿斯兰迪斯阿萨德阿萨德阿萨德阿斯的</h1><h2>啊撒啊啊啊啊啊啊啊啊啊啊啊啊啊</h2><p>你好</p>");
            var div23 = $("<div style='padding:15px;border:1px solid #18a689;'><h1>年度累计阿斯兰迪斯阿萨德阿萨德阿萨德阿斯的</h1><h2>啊撒啊啊啊啊啊啊啊啊啊啊啊啊啊</h2><p>你好</p>");
            div11.append(div12);
            div21.append(div22);
            div11.append(div13);
            div21.append(div23);
            $("#app_content").append(div11);
            $("#app_content").append(div21);

            $(".acc-head").click(function () {
                var this_head = $(this);
                if(this_head.hasClass('active')) {
                    this_head.removeClass('active');
                    this_head.next().slideUp("fast");
                }else{
                    this_head.next().slideDown("fast");
                    this_head.addClass('active');
                }
            });
        });
    </script>

</body>

</html>
